<template>
  <div>
    <div class="header">
      <div class="logo">
        <h2 class="headerLogo">
          <a title="登陆">
            <img alt="logo" style="height: 110px;float: left;"
                 src="../../assets/images/top-logo.png">
          </a>
        </h2>
      </div>
    </div>
    <div class="banner">
      <div class="login_input" id="login_input">
        <span class="login_user" data-title="用户登录">用户登录</span>
        <span class="login_error"><i></i><span></span></span>
        <div class="login-form">
          <el-form :model="loginInfo" :rules="rules" @keyup.enter="submitForm()" ref="loginInfo" class="demo-ruleForm">
            <el-form-item prop="loginName">
              <el-input v-model="loginInfo.loginName" :icon="showCloseLoginName" @click="loginInfoClear('loginName')" placeholder="请输入用户名">
                <template slot="prepend"><i class="fa fa-user"></i></template>
              </el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input type="password" v-model="loginInfo.password" :icon="showClosePassword" @click="loginInfoClear('password')" placeholder="请输入密码">
                <template slot="prepend"><i class="fa fa-key"></i></template>
              </el-input>
            </el-form-item>
            <div class="item item-fore1"></div>
            <div class="login_bottom" id="login_bottom" v-loading="ifLogin" @click="submitForm()"><span v-if="!ifLogin">登录</span></div>
          </el-form>
        </div>
      </div>
      <div class="bd"></div>
    </div>
    <div style="padding-top: 50px;">
      <div style="text-align: center">
        <h5>
          Copyright © 2016-2018 CC520.ME All rights reserved.<br>
        </h5>
      </div>
    </div>
  </div>
</template>
<script>

  import {SERVICE_URLS} from '../../config/service.url'
  import {ROUTE_URL} from '../../router/routes'
  import Vue from 'vue'

//  document.onkeyup = function (event) {
//    const e = event || window.event || arguments.callee.caller.arguments[0];
//    if (e && e.keyCode == 13) { // enter 键
//      document.getElementById('login_bottom').click();
//    }
//  }
  export default{
    data: function () {
      return {
        loginInfo: {
          loginName: "",
          password: ""
        },
        ifLogin: false,
        rules: {
          loginName: [
            {required: true, message: '请输入用户名', triggers: ['blur', "change"]},
            {min: 6, max: 20, message: '用户名长度在 6 到 20 个字符', triggers: ['blur', "change"]}
          ],
          password: [
            {required: true, message: '请输入密码', triggers: ['blur', "change"]},
            {min: 6, max: 20, message: '密码长度在 6 到 20 个字符', triggers: ['blur', "change"]}
          ]
        }
      }
    },
    created(){
      const token = sessionStorage.getItem("token");
      if (token != null) {
        this.$router.push(ROUTE_URL.user.baseInfo.absolutePath);
      }
    },
    computed: {
      showCloseLoginName: function () {
        if (this.loginInfo.loginName != "") {
          return "close"
        } else {
          return ""
        }
      },
      showClosePassword: function () {
        if (this.loginInfo.password != "") {
          return "close"
        } else {
          return ""
        }
      }
    },
    methods: {
      loginInfoClear(value){
        this.loginInfo[value] = ""
      },
      submitForm(){
        this.$refs['loginInfo'].validate((valid) => {
          if (valid) {
            //login
            this.ifLogin = true;
            const self = this;
            Vue.http.post(SERVICE_URLS.auth.login.path, this.loginInfo).then((data) => {
              // 响应成功回调
              if (data.code == 0) {
                sessionStorage.setItem("token", data.body)
                setTimeout(() => {
                  self.$router.push(ROUTE_URL.user.baseInfo.absolutePath);
                  self.ifLogin = false;
                }, 500);
                document.onkeyup = null;
              } else {
                this.$message.error(data.message);
                self.ifLogin = false;
              }
            }).catch(() => {
              self.ifLogin = false;
            });
          } else {
            return false;
          }
        });
      }
    }
  }
</script>
<style>
  #login_input .el-loading-mask {
    background-color: transparent;
  }

  #login_input .el-loading-spinner .path {
    stroke: #fff
  }

  #login_input .el-input-group__prepend {
    width: 35px;
    text-align: center;
  }

  #login_input .el-input__inner {
    height: 42px;
  }
</style>
<style scoped>
  .header {
    overflow: hidden;
    position: relative;
    z-index: 2;
    margin: 0 auto;
    height: 150px;
    background-color: #fff;
    width: 100%;
  }

  .header .logo {
    margin: 0 auto;
    height: 110px;
    width: 1200px;
  }

  .headerNav {
    right: 0;
    text-align: right;
    top: 52px;
    width: 300px;
    position: absolute;
  }

  .headerNav a {
    color: #515151;
    font-size: 12px;
    padding: 0 2px;
  }

  .headerNav a:hover {
    text-decoration: underline;
    color: #658b98;
  }

  .banner {
    min-width: 1000px;
    position: relative;
    height: 478px;
    overflow: hidden;
  }

  .banner .bd {
    position: relative;
    z-index: 0;
    width: 100% !important;
    height: 478px;
    background: url('../../assets/images/theme-pic1.jpg') #CCE1F3 center 0 no-repeat;
  }

  .footer {
    text-align: center;
    font-size: 12px;
    color: #999999;
  }

  .authcenter-background {
    position: absolute;
    width: 0;
    height: 0;
    top: 0;
    left: 0;
    overflow: hidden;
    z-index: -1;
  }

  .login_input {
    width: 368px;
    height: 295px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .3);
    position: absolute;
    left: 60.3%;
    bottom: 117.5px;
    z-index: 9
  }

  .login_user {
    display: inline-block;
    border-bottom: 1px solid #fff;
    width: 310px;
    font-size: 16px;
    color: #fff;
    margin-top: 30px;
    margin-left: 29px;
    padding-bottom: 5px;
  }

  .login_bottom {
    letter-spacing: 8px;
    width: 310px;
    height: 40px;
    font-size: 20px;
    color: #fff;
    background-color: rgb(27, 166, 223);
    line-height: 40px;
    text-align: center;
    box-shadow: -3px -3px 12px #189BD7 inset;
    border-radius: 3px;
    cursor: pointer;
    transition: 1s;
    margin: 29px auto 5px;
  }

  .login_bottom:hover {
    background-color: rgb(22, 142, 210);
    cursor: pointer;
  }

  .login-form {
    width: 310px;
    margin-left: 29px;
    margin-top: 27px
  }
</style>
